<template>
  <el-row class="home"
          :gutter="20">
    <el-col style="margin-top:20px"
            :span="24">
      <div class="num">
        <el-card v-for="item in countData"
                 :key="item.name"
                 :body-style="{display:'flex',padding:0}">
          <i class="icon"
             :class="`el-icon-${item.icon}`"
             :style="{background:item.color}" />
          <div class="detail">
            <p class="num">{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col style="margin-top:20px"
            :span="24">
      <!-- 折线图 -->
      <el-card style="height:400px">
        <div ref="echarts"
             style="height:350px" />
        <!-- <echart :chart-data="echartData.order"
                style="height:280px" /> -->
      </el-card>
      <!-- 四个图表 -->
      <div class="graph">
        <el-card style="height:280px">
          <div ref="userEcharts"
               style="height:240px" />
          <!-- <echart :chart-data="echartData.user"
                  style="height:260px" /> -->
        </el-card>
        <el-card style="height:280px">
          <div ref="productEcharts"
               style="height:240px" />
          <!-- <echart :chart-data="echartData.video"
                  :is-axis-chart="false"
                  style="height:260px" /> -->
        </el-card>
        <el-card style="height:280px">
          <div ref="orderEcharts"
               style="height:240px" />
          <!-- <echart :chart-data="echartData.video"
                  :is-axis-chart="false"
                  style="height:260px" /> -->
        </el-card>
        <el-card style="height:280px">
          <div ref="moneyEcharts"
               style="height:240px" />
          <!-- <echart :chart-data="echartData.video"
                  :is-axis-chart="false"
                  style="height:260px" /> -->
        </el-card>

      </div>
    </el-col>
    <el-col style="margin-top:20px"
            :span="12">
      <el-card style="height:460px;">
        <el-table :data="tableData">
          <el-table-column v-for="(val,key) in tableLabel"
                           :key="key"
                           :prop="key"
                           :label="val" />
        </el-table>
      </el-card>
    </el-col>
    <el-col style="margin-top:20px"
            :span="12">
      <el-card style="height:460px;"
               shadow="hover">
        <div class="user">
          <img :src="userImg">
          <div class="userinfo">
            <p class="name">{{ this.$store.getters.name }}</p>
            <p class="access">{{ this.$store.getters.userinfo.level == '1' ? '超级管理员' : '普通管理员' }}</p>
          </div>
        </div>
        <!-- <div class="info"> -->
        <el-col :span="12">
          <div class="login-info">
            <p>联系电话：<span>{{ this.$store.getters.userinfo.iphone }}</span></p>
            <p>邮箱地址：<span>{{ this.$store.getters.userinfo.email }}</span></p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="login-info">
            <p>本次登录时间：<span>{{ this.$store.getters.logintime }}</span></p>
            <p>本次登录地点：<span>广东省东莞市</span></p>
          </div>
        </el-col>
        <!-- </div> -->

      </el-card>
    </el-col>
  </el-row>
</template>

<script>
// import { getData } from '../../api/data.js'
import testsApi from '@/api/home.js'

import * as echarts from 'echarts'
// import Echart from '../../components/ECharts.vue'
import axios from 'axios'
export default {
  name: 'Home',
  // components: {
  //   Echart
  // },
  data () {
    return {
      userImg: require('../../assets/images/userimg.jpg'),
      // 注：  tableData的对象数组元素顺序不能改变
      tableData: [
        {
          name: '海运',
          numBuy: 0,
          todayBuy: 0,
          monthBuy: 0,
          totalBuy: 0
        },
        {
          name: '陆运',
          numBuy: 0,
          todayBuy: 0,
          monthBuy: 0,
          totalBuy: 0
        },
        {
          name: '空运',
          numBuy: 0,
          todayBuy: 0,
          monthBuy: 0,
          totalBuy: 0
        },
        {
          name: '铁路',
          numBuy: 0,
          todayBuy: 0,
          monthBuy: 0,
          totalBuy: 0
        }

      ],
      tableLabel: {
        name: '订单类型',
        numBuy: '订单总数',
        todayBuy: '本周销量',
        monthBuy: '本月销量',
        totalBuy: '总销量'
      },
      countData: [
        {
          name: '舱位数量',
          value: 210,
          icon: 's-goods',
          color: '#5ab1ef'
        },
        {
          name: '用户数量',
          value: 1234,
          icon: 'user-solid',
          color: '#2ec7c9'
        },
        {
          name: '今日支付订单',
          value: '￥1234',
          icon: 'success',
          color: '#67C23A'
        },
        {
          name: '本月支付订单',
          value: '￥111',
          icon: 's-flag',
          color: '#F56C6C'
        }

      ],
      echartData: {
        order: {
          xData: [],
          series: [
            // {
            //   name: 'Union Ads',
            //   type: 'line',
            //   stack: 'Total',
            //   data: [220, 182, 191, 234, 290, 330, 310]
            // },
            // {
            //   name: 'Video Ads',
            //   type: 'line',
            //   stack: 'Total',
            //   data: [150, 232, 201, 154, 190, 330, 410]
            // },
            // {
            //   name: 'Direct',
            //   type: 'line',
            //   stack: 'Total',
            //   data: [320, 332, 301, 334, 390, 330, 320]
            // }
          ]
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  created () {
    this.gettopdata()
    this.getecharts()
    this.getfourecharts()
    this.getordertable()

    // this.getlocation()
  },
  mounted () {
    // this.gettopdata()
    // this.getecharts()
    // this.getfourecharts()
    // this.getordertable()
    //   getData().then(res => {
    //     const { code, data } = res.data
    //     if (code === 20000) {
    //       this.tableData = data.tableData
    //       const order = data.orderData
    //       const xData = order.date
    //       const keyArray = Object.keys(order.data[0])
    //       const series = []
    //       keyArray.forEach(key => {
    //         series.push({
    //           name: key,
    //           data: order.data.map(item => item[key]),
    //           type: 'line'
    //         })
    //       })
    //       /* const option = {
    //         xAxis: {
    //           data:xData
    //         },
    //         yAxis:{},
    //         legend:{
    //           data:keyArray
    //         },
    //         series
    //       } */
    //       this.echartData.order.xData = xData
    //       this.echartData.order.series = series
    //       /* const E = echarts.init(this.$refs.echarts)
    //       E.setOption(option) */

    //       //用户图
    //       /* const userOption = {
    //         legend:{
    //           textStyle:{
    //             color:'#333'
    //           },
    //         },
    //         grid:{
    //           left:"20%"
    //         },
    //         tooltip:{
    //           trigger:"axis",
    //         },
    //         xAxis:{
    //           type:"category",
    //           data:data.userData.map(item => item.date),
    //           axisLine:{
    //             lineStyle:{
    //               color:"#17b3a3"
    //             },
    //           },
    //           axisLabel:{
    //             interval:0,
    //             color:"#333",
    //           },
    //         },
    //         yAxis:[
    //           {
    //             type:"value",
    //             axisLine:{
    //               lineStyle:{
    //                 color:"#17b3a3",
    //               },
    //             },
    //           },
    //         ],
    //         color:["#2ec7c9","#b6a2de"],
    //         series:[
    //           {
    //             name:'新增用户',
    //             data:data.userData.map(item=>item.new),
    //             type:'bar'
    //           },
    //           {
    //             name:'活跃用户',
    //             data:data.userData.map(item=>item.active),
    //             type:'bar'
    //           }
    //         ],
    //       } */
    //       this.echartData.user.xData = data.userData.map(item => item.date)
    //       this.echartData.user.series = [
    //         {
    //           name: '新增用户',
    //           data: data.userData.map(item => item.new),
    //           type: 'bar'
    //         },
    //         {
    //           name: '活跃用户',
    //           data: data.userData.map(item => item.active),
    //           type: 'bar'
    //         }
    //       ]
    //       /* const U = echarts.init(this.$refs.userEcharts)
    //       U.setOption(userOption) */

    //       //饼图
    //       /* const videoOption = {
    //         tooltip:{
    //           trigger:"item",
    //         },
    //         color:[
    //           "#0f78f4",
    //           "#dd536b",
    //           "#9462e5",
    //           "#a6a6a6",
    //           "#e1bb22",
    //           "#39c362",
    //           "#3ed1cf",
    //         ],
    //         series:[
    //           {
    //             data:data.videoData,
    //             type:'pie'
    //           }
    //         ],
    //       } */
    //       this.echartData.video.series = [
    //         {
    //           data: data.videoData,
    //           type: 'pie'
    //         }
    //       ]
    //       /* const V = echarts.init(this.$refs.videoEcharts)
    //       V.setOption(videoOption) */
    //     }
    //     console.log(res);
    //   })
  },
  methods: {
    gettopdata () {
      testsApi.gettopdata()
        .then(res => {
          console.log('四个标签', res)
          this.countData[0].value = res.data.productnum
          this.countData[1].value = res.data.usernum
          this.countData[2].value = '￥' + res.data.daytotal
          this.countData[3].value = '￥' + res.data.monthtotal
        })
    },
    // 近十天交易数据
    getecharts () {
      console.log('近十天日期', this.utils.getaaday(10))
      testsApi.getecharts()
        .then(response => { // 删除成功
          // 回到列表页面
          console.log('response', response)
          const series = []
          series.push({
            name: '总交易',
            data: response.data.total,
            type: 'line'
          })
          // this.echartData.order.xData = ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007', '20191006', '20191007', '20191007']
          this.echartData.order.xData = this.utils.getaaday(10)
          this.echartData.order.series = series
          const option = {
            title: {
              text: '近10天交易'
            },
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: this.echartData.order.xData
            },
            yAxis: {},
            // legend: {
            //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            // },
            series: this.echartData.order.series
          }
          const E = echarts.init(this.$refs.echarts)
          E.setOption(option)
        })
    },
    getfourecharts () {
      testsApi.getfourecharts()
        .then(response => { // 删除成功
          console.log('四个图表', response)
          // 用户类型
          const userOption = {
            title: {
              text: '用户类型',
              textStyle: {
                fontSize: 16 // 字体大小
              }
              // x: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              y: 'bottom',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['35%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 3
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  // { value: 1048, name: '普通用户' },
                  // { value: 735, name: '企业用户' }
                  { value: response.data.userlist[0].num, name: '普通用户' },
                  { value: response.data.userlist[1].num, name: '企业用户' }
                ]
              }
            ]
          }
          const U = echarts.init(this.$refs.userEcharts)
          U.setOption(userOption)
          // 商品类型
          const productOption = {
            title: {
              text: '商品类型',
              textStyle: {
                fontSize: 16 // 字体大小
              }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              // orient: 'vertical',
              y: 'bottom',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '60%',
                data: [
                  // { value: 1048, name: '海运' },
                  // { value: 735, name: '陆运' },
                  // { value: 580, name: '空运' },
                  // { value: 484, name: '铁路' }
                  { value: response.data.productlist[0].num, name: response.data.productlist[0].product_type === 'sea' ? '海运' : response.data.productlist[0].product_type },
                  { value: response.data.productlist[1].num, name: response.data.productlist[1].product_type === 'air' ? '空运' : response.data.productlist[0].product_type },
                  { value: response.data.productlist[2].num, name: response.data.productlist[2].product_type === 'line' ? '陆运' : response.data.productlist[0].product_type },
                  { value: response.data.productlist[3].num, name: response.data.productlist[3].product_type === 'railway' ? '铁路' : response.data.productlist[0].product_type }
                ],
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          const P = echarts.init(this.$refs.productEcharts)
          P.setOption(productOption)

          const orderOption = {
            title: {
              text: '本周订单数量',
              textStyle: {
                fontSize: 16 // 字体大小
              }
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              y: 'bottom',
              left: 'center'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '10%',
              top: '18%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '海运',
                type: 'bar',
                barWidth: 20,
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [response.data.week[0].sea, response.data.week[1].sea, response.data.week[2].sea, response.data.week[3].sea, response.data.week[4].sea, response.data.week[5].sea, response.data.week[6].sea]
              },
              {
                name: '陆运',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [response.data.week[0].line, response.data.week[1].line, response.data.week[2].line, response.data.week[3].line, response.data.week[4].line, response.data.week[5].line, response.data.week[6].line]
              },
              {
                name: '空运',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [response.data.week[0].air, response.data.week[1].air, response.data.week[2].air, response.data.week[3].air, response.data.week[4].air, response.data.week[5].air, response.data.week[6].air]
              },
              {
                name: '铁路',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [response.data.week[0].railway, response.data.week[1].railway, response.data.week[2].railway, response.data.week[3].railway, response.data.week[4].railway, response.data.week[5].railway, response.data.week[6].railway]
              }
              // {
              //   name: 'Search Engine',
              //   type: 'bar',
              //   data: [862, 1018, 964, 1026, 1679, 1600, 1570],
              //   emphasis: {
              //     focus: 'series'
              //   },
              //   markLine: {
              //     lineStyle: {
              //       type: 'dashed'
              //     },
              //     data: [[{ type: 'min' }, { type: 'max' }]]
              //   }
              // },
            ]
          }
          const O = echarts.init(this.$refs.orderEcharts)
          O.setOption(orderOption)
          const moneyOption = {
            // Make gradient line here
            visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              }
            ],
            title: [
              {
                text: '历史交易',
                textStyle: {
                  fontSize: 16 // 字体大小
                }
              }
            ],
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                // data: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007']
                data: this.utils.getaamonth(6)
              }
            ],
            yAxis: [{}],
            series: [
              {
                type: 'line',
                showSymbol: false,
                // data: [121, 231, 122, 334, 345, 446, 847]
                data: response.data.month
              }
            ]
          }
          const M = echarts.init(this.$refs.moneyEcharts)
          M.setOption(moneyOption)
        })
    },
    // 订单表最近数据
    getordertable () {
      testsApi.getordertable()
        .then(response => { // 删除成功
          console.log('订单表最近数据', response)
          for (let i = 0; i < response.data.sumlist.length; i++) {
            switch (response.data.sumlist[i].sum_type) {
              case 'sea':
                this.tableData[0].numBuy = response.data.sumlist[i].sum
                break
              case 'line':
                this.tableData[1].numBuy = response.data.sumlist[i].sum
                break
              case 'air':
                this.tableData[2].numBuy = response.data.sumlist[i].sum
                break
              case 'railway':
                this.tableData[3].numBuy = response.data.sumlist[i].sum
                break
              default:
                break
            }
          }
          for (let i = 0; i < response.data.todaylist.length; i++) {
            switch (response.data.todaylist[i].today_type) {
              case 'sea':
                this.tableData[0].todayBuy = response.data.todaylist[i].today
                break
              case 'line':
                this.tableData[1].todayBuy = response.data.todaylist[i].today
                break
              case 'air':
                this.tableData[2].todayBuy = response.data.todaylist[i].today
                break
              case 'railway':
                this.tableData[3].todayBuy = response.data.todaylist[i].today
                break
              default:
                break
            }
          }
          for (let i = 0; i < response.data.monthlist.length; i++) {
            switch (response.data.monthlist[i].month_type) {
              case 'sea':
                this.tableData[0].monthBuy = response.data.monthlist[i].month
                break
              case 'line':
                this.tableData[1].monthBuy = response.data.monthlist[i].month
                break
              case 'air':
                this.tableData[2].monthBuy = response.data.monthlist[i].month
                break
              case 'railway':
                this.tableData[3].monthBuy = response.data.monthlist[i].month
                break
              default:
                break
            }
          }
          for (let i = 0; i < response.data.totallist.length; i++) {
            switch (response.data.totallist[i].total_type) {
              case 'sea':
                this.tableData[0].totalBuy = response.data.totallist[i].total
                break
              case 'line':
                this.tableData[1].totalBuy = response.data.totallist[i].total
                break
              case 'air':
                this.tableData[2].totalBuy = response.data.totallist[i].total
                break
              case 'railway':
                this.tableData[3].totalBuy = response.data.totallist[i].total
                break
              default:
                break
            }
          }
        })
    },
    getlocation () {
      // 注：跨域问题未解决
      axios({
        url: 'http://pv.sohu.com/cityjson', // 在线跨域请求
        method: 'GET', // 默认是get请求
        headers: { // 设置请求头
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': 'X-Requested-With',
          'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then(function (val) {
        console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
      }).catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  padding: 0px 20px;
  // 四个标签
  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 24%;
    }
    .icon {
      font-size: 30px;
      width: 80px;
      height: auto;
      text-align: center;
      line-height: 120px;
      color: #fff;
    }
    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        font-size: 30px;
        margin-bottom: 10px;
      }
      .txt {
        font-size: 16px;
        text-align: center;
        color: #999999;
      }
    }
  }
  // 四个图表
  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card {
      width: 24%;
    }
  }
  // 用户信息
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
    &info {
      .name {
        font-size: 32px;
        margin-bottom: 10px;
      }
      .access {
        color: #999999;
      }
    }
  }
  .info {
    display: inline-flex;
  }
  .login-info {
    p {
      line-height: 28px;
      font-size: 14px;
      color: #999999;
      span {
        color: #666666;
        margin-left: 60px;
      }
    }
  }
}
</style>
